<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>小说搜索引擎</title>
        <script src="../static/jquery-3.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#f_t").click(function(){
        $.ajax({
            url: "/index",
            data: {'in_f': document.getElementById('in_f').value},
            success(data, status) {
                var ul = document.getElementById('list_t');
                ul.innerText = '';
                var obj = JSON.parse(data);
                for(var i=0;  i <= obj.length;i++){
                    if (obj[i]['book_name'] != null){

                        var li = document.createElement('li');
                        ul.appendChild(li);
                        li.setAttribute('style', 'list-style-type:none;margin-left:5px');

                        var div = document.createElement('div');
                        li.appendChild(div);
                        div.setAttribute('style','height:125px;border:1px #000 solid;margin-top:5px;width:980px;');

                        var div_img = document.createElement('div');
                        div.appendChild(div_img);
                        div_img.setAttribute('style','height:120px;wight:120px;float:left');

                        var div_book = document.createElement('div');
                        div.appendChild(div_book);
                        div_book.setAttribute('style','height:120px;width:780px;float:right;overflow:hidden');

                        var span_img = document.createElement('img');
                        div_img.appendChild(span_img);
                        span_img.setAttribute('src',obj[i]['book_img']);
                        span_img.setAttribute('style','width:120px;height:120px;');

                        var p_url = document.createElement('p');
                        div_book.appendChild(p_url);
                        p_url.setAttribute("style","width:780px;text-align:left;  display:block;mangin:0;padding:0 ");
                        var a2 = document.createElement('a');
                        var text = document.createTextNode(obj[i]['book_name']);
                        p_url.appendChild(a2);
                        a2.setAttribute('href', obj[i]['book_url']);
                        a2.appendChild(text);

                        var p_auto = document.createElement('p');
                        div_book.appendChild(p_auto);
                        p_auto.setAttribute("style","width:780px; text-align:left;  display:block; mangin:0;padding:0  ");
                        p_auto.innerText = '作者：'+obj[i]['book_auto'];

                        var p_link = document.createElement('p');
                        div_book.appendChild(p_link);
                        p_link.setAttribute("style","width:780px; text-align:left;  display:block;margin:0;padding:0 ");
                        p_link.innerText = '类型：'+obj[i]['book_link'];



                    }
                }
            }
        })
    });

});
</script>
	</head>
	<body>
            <div class="main" style="margin: 0 auto;width: 1200px;height: 900px;">
            <div class="mui-input-row" style="height: 50px;width: 650px;margin: 0 auto">
                <label style="font-size: 30px;width: 650px;margin-left:30%">搜索引擎</label>
                <input id="in_f" name="input_text" type="text" placeholder="请输入关键词" style="background: #91b6b9;width: 580px;height: 40px;">
  <!--              <button type="submit" class="mui-btn mui-btn-blue mui-btn-outlined" id="find_t">搜索</button>  -->
                <button id="f_t"  >搜索</button>
            </div>
            <div class="text_show" id="text_show" style="width: 1100px;height: 800px;background: #f3fcff;margin:0 auto;margin-top: 50px;overflow:auto">
                <ul id="list_t">

                </ul>
            </div>
        </div>
	</body>
<a href="http://www.beian.miit.gov.cn/">备案号:豫ICP备19032695</a>
</html>
